<template>
  <li v-if="item.name === '-'">
    <hr/>
  </li>
  <li v-else class="menu-item">
    <div class="menu-item-container" style="padding:4px 10px" :class="classObject" @click="handleItemClick" @mouseenter="handleItemMouseEnter">
      <div :class="item.icon">
        <template v-if="item.iconElement">
          {{ item.iconElement }}
        </template>
        <div v-else style="margin-left: 1em" />
      </div>
      <div class="menu-item-name">
        {{ itemElement || item.displayName || item.name }}
      </div>
      <div v-if="item.shortcut" class='menu-item-shortcut'>{{item.shortcut}}</div>
      <div v-if="item.items && item.items.length" v-bind:style="triangleIconStyle" />
    </div>
    <MyMenu v-if=" isActive && item.items && item.items.length " v-bind:items="item.items" :classObject="{'active': isActive}" @mydeactivate="deactivate" :context="context"/>
  </li>
</template>
<script>
  // import Menu from './menu.vue'
  export default {
    componentName: 'MyMenuItem',
    // components: {
    //   Menu
    // },
    data: function () {
      return {
        activeItemIndex: -1,
        triangleIconStyle: {
          marginLeft: 'auto',
          marginRight: '-6px',
          content: '',
          marginTop: '4px',
          width: 0,
          height: 0,
          borderTop: '4px solid transparent',
          borderLeft: '8px solid #ccc',
          borderBottom: '4px solid transparent'
        }
      }
    },
    props: {
      item: {
        required: true
      },
      context: Object,
      index: Number,
      isActive: Boolean,
      styleObject: Object,
      deactivate: Function
    },
    computed: {
      classObject: function () {
        let classObject = {
          active: this.isActive,
          disabled: this.disabled
        }
        return classObject
      },
      itemElement: function () {
        return this.item.element ? this.item.element : null
      },
      disabled: function () {
        return this.item.isDisabled
      }
    },
    methods: {
      handleItemClick: function () {
        if(this.disabled){
          return
        }
        let command = this.item.command
        if(typeof command ==='function'){
          command()
        }else{
          require('../../commands').dispatchCommand(command)
          // console.log(command)
        }
        this.deactivate()
      },
      handleItemMouseEnter: function (e) {
        this.$emit('toggleActive', this.index)
      }
    },
    beforeCreate: function () {
      this.$options.components.MyMenu = require('./menu.vue')
    }
  }

</script>
